<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>报表1</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
</head>
<body>
    <div class="wxw_contain">
        <div class="wxw_header"><span>物业数据饼状图</span></div>
        <div class="wxw_remark">
            <table>
                <tr>
                    <td>浏览量占比</br><span>100%</span></td>
                    <td>新访客数</br><span>89</span></td>
                    <td>跳出率</br><span>98.56%</span></td>
                    <td>平均访问时长</br><span>00:01:29</span></td>
                    <td style="border-right:0">平均访问页数</br><span>1.68</span></td>
                </tr>
            </table>
        </div>
        <div id="index1" class="wxw_echart"></div>
    </div>
    
    <!-- <script src="js/echarts-all.js"></script> -->
     <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>    
     <script type="text/javascript">
       require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        // 基于准备好的dom，初始化echarts图表
         require(
            [
                'echarts',
                'echarts/chart/pie',
                'echarts/chart/funnel' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('index1')); 
                
                var option = {
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient : 'vertical',
        x : 'left',
        data:['水费','电费','管理费','垃圾费','租金','租赁保证金','广告快讯费','装修保证金','广告费','其他']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true, 
                type: ['pie', 'funnel']
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : false,
    series : [
        {
            name:'访问来源',
            type:'pie',
            selectedMode: 'single',
            radius : [0, 70],
            
            // for funnel
            x: '20%',
            width: '40%',
            funnelAlign: 'right',
            max: 1548,
            
            itemStyle : {
                normal : {
                    label : {
                        position : 'inner'
                    },
                    labelLine : {
                        show : false
                    }
                }
            },
            data:[
                {value:335, name:'水费'},
                {value:679, name:'电费'},
                {value:1548, name:'管理费', selected:true}
            ]
        },
        {
            name:'访问来源',
            type:'pie',
            radius : [100, 140],
            
            // for funnel
            x: '60%',
            width: '35%',
            funnelAlign: 'left',
            max: 1048,
            
            data:[
                {value:335, name:'水费'},
                {value:310, name:'电费'},
                {value:234, name:'管理费'},
                {value:135, name:'垃圾费'},
                {value:1048, name:'租金'},
                {value:251, name:'租赁保证金'},
                {value:147, name:'广告快讯费'},
                {value:102, name:'其他'}
            ]
        }
    ]
};
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
    </script>
</body>
</html>